<script setup lang="ts">
import Saying from '../components/Saying.vue'
import Sayinglist from '../components/Sayinglist.vue'
import { onMounted, ref } from 'vue'
import { userinfo } from '@/stores/counter'
import getResOrPoscat from '@/api/getResOrPoscat'

const { getSaying } = getResOrPoscat()
const user = userinfo()

const loading = ref(false)
const moreLoading = ref(false)

onMounted(() => {
    loading.value = true
    getSaying().then((res) => {
        user.pages.saying.list = res
        loading.value = false
    })
})

const showMore = () => {
    moreLoading.value = true
    getSaying(user.pages.saying.page + 1).then((res) => {
        user.pages.saying.list = user.pages.saying.list.concat(res)
        user.pages.saying.page += 1
        moreLoading.value = false
    })
}
</script>
<template>
    <div class="saying-div">
        <Saying />
        <div class="saying-line"></div>
        <div class="saying-list" v-loading="loading">
            <Sayinglist v-for="item in user.pages.saying.list" :data="item" />
            <div class="show-more font-xbs" @click="showMore()"
                v-if="user.pages.saying.total - user.pages.saying.page * 10 > 0" v-loading="moreLoading">
                展开更多
            </div>
        </div>
        <div class="not-found" v-show="user.pages.saying.list.length == 0 && !loading">
            暂无资源
        </div>
    </div>
</template>

<style scoped>
.not-found {
    font-size: 26px;
    color: #000000;
    margin-top: 20px;
}

.saying-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100px;
}

.saying-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.saying-line {
    height: 2px;
    width: 80%;
    background-color: #f2ac1c;
    margin-top: 80px;
    margin-bottom: 40px;
}
</style>
